<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    	<meta name="format-detection" content="telephone=no">
		<title>分享转发</title>
		<link rel="stylesheet" href="../css/app-h5-common.css" />
		<!--<script type="text/javascript" src="../js/zepto.min.js" ></script>-->
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/iscroll.min.js" ></script>
		<script type="text/javascript" src="../js/angular.min.js" ></script>
	</head>
	<style>
		html{
			font-size: 100px;
			height: auto;
			background: #FFFFFF;
		}
		body{
			width: 100%;
			height: auto;
		}
		.page{
			width: 100%;
			height: auto;
		}
		.header{
			width: 100%;
			margin-bottom: 0.2rem;

		}
		.header img{
			display: block;
			width: 100%;
		}
		.content{
			width: 100%;
			padding: 0 0.15rem 0.3rem;
			box-sizing: border-box;
			color: #212a2f;
			font-size: 0.16rem;
			position: relative;
			margin-bottom: 0.6rem;

		}
		.zan{
			position: absolute;
			right: 0.15rem;
			color: #AAAAAA;
		}
		.zan .zanImg{
			display: inline-block;
			width: 0.18rem;
			height: 0.15rem;

		}
		.title{
			font-size: 0.24rem;
			font-weight: bold;
			line-height: 0.31rem;
			width: 2.4rem;
			overflow: auto;
			margin-bottom: 0.2rem;

		}
		.abstract{
			font-size: 0.14rem;
			line-height: 0.2rem;
			margin-bottom:0.2rem
		}
		.source{
			font-size: 0.1rem;
			color: #aaaaaa;
			margin-bottom: 0.3rem;
		}
		.web{
			margin-right: 0.15rem;
		}
		.line{
			width: 100%;
			height: 1px;
			background-color:#DDDDDD;
			display: block;
			margin-bottom: 0.3rem;
		}
		.contact{
			font-size: 0.14rem;
			color: #AAAAAA;
			line-height: 0.24rem;
			padding: 0 0.15rem;
			margin-bottom: 0.3rem;
		}
		#wrapper{
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			overflow: hidden;
		}
		#scroller {
			position: absolute;
			z-index: 1;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			width: 100%;
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-text-size-adjust: none;
			-moz-text-size-adjust: none;
			-ms-text-size-adjust: none;
			-o-text-size-adjust: none;
			text-size-adjust: none;
		}

		.content p{
			line-height: 0.24rem;
		}
		.content img{
			width: 100%;
			display: block;
			height: auto;
			margin: 0.15rem 0;
		}
		.red{
			color: #F45440;
			position: absolute;
			right: 0;
			top: 0.5rem;
			font-size: 0.12rem;
			opacity: 0;
		}
	</style>
	<body onload="loaded()" ng-controller="myCtrl">
		<div class="page" id="wrapper">


			<div id="scroller">

				<div class="header"><img src="../img/1.jpg"/></div>
				<div class="content">
					<div class="zan"><img class="zanImg" src="../img/like-default.png"/>
						<span class="likes">336</span>
					</div>
					<span class="red">您已经点过赞了！</span>
					<div class="title">
						我看了四集《翻译官》这坑要入吗！？
					</div>
					<p class="abstract">这部芒果台流水线上的青春爱情偶像剧，加入了法语对白的小浪漫，会是什么样呢？</p>
					<p class="source">来自&nbsp;<span class="web">果壳</span><span class="time">七小时前</span></p>
					<span class="line"></span>
					<p>电视剧一开始，男女主角就为自己贴上了标签，两个人的出场方式，为整部剧奠定了浓浓的玛丽苏基调。</p>
	　　			<p>第一集。女主乔菲作为一名大二学生，以苏黎世大学的法语交换生身份出场。</p>
					<img src="../img/2.jpg" />
					<p>一出场就特别傲娇的标榜了她的人生信条。</p>
					<p>他的人生信条是“走过路过不要错过”。</p>
					<img src="../img/3.jpg" />
					<img src="../img/4.jpg" />
					<p>看到这句话，我瞬间想起了：“全场都十元，买啥都十块，十块钱你买不了吃亏，十块钱你买不了上当，走过路过不要错过啊！”就还…挺…接地气的……</p>
					<p>这个时候男主程家阳也霸气出场了。</p>
					<img src="../img/1.jpg"/>
					<p>男主也有一个人生信条，那就是：谁要在法语翻译上出错就弄死谁。</p>
					<img src="../img/2.jpg" />
					<p>这年头电视剧为了让大家看懂编剧的设定，都要事先让主角给自己定个位了吗？</p>
					<p>然后一点也不矜持地，男女猪脚相遇了。</p>
					<p>女猪脚在翻译上犯了一个错，就被男猪脚赶回国了。</p>
					<p>这么一转眼就到了六年后。。。</p>
					<img src="../img/3.jpg" />
					<p>说了这么多，这个坑你入不入，还是你自己看着办吧!</p>
					<p>不过编剧们，还是要努力出些新套路，观众才会买账啊！</p>
				</div>
				<div class="contact">
					<p>电话：<span>028-61512650</span></p>
					<p>网址：<span>http://www.guokr.com/</span></p>
					<p>地址：<span>成都市武侯区长益路13号蓝海OFFICE</span></p>
				</div>
			</div>
		</div>
	</body>
	<script>
	var myApp=angular.module("myApp",[]);
		myApp.controller("myCtrl",function($scope, $http,$location){
			$scope.datas="";
			$scope.collectParams=function collectParams() {
            // 来源
			var href = location.href.toLowerCase(), match,match1,match2,versionName;
		    if (href.indexOf('devicetype=ios') > 0) {
		        this.source = 'ios';

		    } else if (href.indexOf('devicetype=android') > 0) {
		        this.source = 'android';
		    } else {
		        this.source = 'H5';
		    }

		    match = href.match(/case=(\d+)/);
		    if (match && match.length == 2) {
		        this.testcase = match[1];
//		        console.log('testcase=' + match[1]);
		    };

		    // 依赖客户端传入一个正确的userId
		    match = href.match(/userid=(\d+)/);
		    if (match && match.length == 2) {
		        this.userId = match[1];

//		      obj.setItem("userId",this.userId);

		    } else {
//		        alert('\u83B7\u53D6\u7528\u6237ID\u5931\u8D25!');//获取用户ID失败!
		    };

		    // 依赖客户端传入一个正确的versionName任务类型
		    match2=href.match(/versionname=(\d\.\d\.\d+)/);
		     if (match2 && match2.length == 2) {
		        this.versionName = match2[1];
		    };


		    return ({
		    	source:this.source,
		    	testcase:this.testcase,
		    	userId:this.userId,
		    	versionName:this.versionName

		    })
		};
		$scope.argu={
			userId:$scope.collectParams().userId,
			devicetype:$scope.collectParams().source,
			versionName:$scope.collectParams().versionName,


		};
		$scope.goTotalBouns=function goTotalBouns(){
			location.href="totalBouns.html?userId="+$scope.argu.userId+"&currentPage="+$scope.argu.currentPage+"&recordPerPage="+$scope.argu.recordPerPage;
//			location.href="totalBouns.html?userId=1&currentPage=1&recordPerPage=10";

		};
		$scope.goTask=function goTask(){
			location.href="dailyTask.html?userId="+$scope.argu.userId+"&position=2&versionName="+$scope.argu.versionName;
//			location.href="dailyTask.html?userId=1&position=2&versionName=4.0.3";

		};


		$http({
			url:'/wap/credit/info',
//			url:'bonusBalance.json',
			method:'GET',
			params:{
				userId:$scope.argu.userId
			}
		}).success(function(response){
			$scope.datas=response.data;
			console.log(response);

		});
	})



		var myScroll,answer;
		function loaded () {
			myScroll = new IScroll('#wrapper');

		}

		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
   		function setWidth(){
   			var $imgWidth = $('.header img').width();
	    	$('.header img').css({'height':$imgWidth/1.5});
//	    	console.log($imgWidth+"/"+($imgWidth/1.5))
   		};

		function dianzan(){
			var zanImg=$(".zan .zanImg");
			var likes=parseInt($(".zan .likes").text());
			var tips=$(".content .red")
			var hasZan=true;
			if (hasZan) {
				$(".zan .zanImg").attr("src","../img/like-light.png");
			}
			else{
				$(".zan .zanImg").attr("src","../img/like-default.png");

			};

			zanImg.on("touchend",function(){
				if (hasZan) {
					tips.text("您已经点过赞了！");
					tips.css("opacity",1).animate({opacity:0},800);
				} else{
					$(".zan .zanImg").attr("src","../img/like-light.png");
					$(".zan .likes").text(likes+1);
					hasZan=true;
				}
			})
		};




		setWidth();

		dianzan();

	</script>
</html>
